<template>
  <div>
    <van-search
      class='search'
      :value='val'
      placeholder="请输入客户姓名"
      @change="onChange"
      @clear='onClear'
    >
      <view slot="action" @tap="onSearch">搜索</view>
    </van-search>
    <div class="list" v-if="list.length > 0">
      <div class="cus_item df aic" v-for="(item, index) in list" :key="index"  @click="linkDetail(item.id)">
        <div class="left fs0 df"><img mode='widthFix' v-if='item.avator' :src="uploadUrl + 'resource/' + item.avator + '?imageView/2/w/150/h/150'" alt="" /></div>
        <div class="right flex1">
          <div class="fs34 mb15 df jsb"><span>{{item.name}}</span><span class="fs24 colorBlue">{{item.org_name}}</span></div>
          <div class="fs30 c_4c4c4c"><span class="mr15">性别：<dic-label typeCode="sex" v-model="item.sex"></dic-label></span> <span>出生日期：{{item.birthday}}</span></div>
          <div class="fs30 c_4c4c4c">联系方式：{{item.tel}}</div>
        </div>
      </div>
    </div>
    <div class="nodate fs30 tc" v-else>暂无数据</div>
    <div class="addBtn tc fs30 mainBgColor" @click="add_customer">添加客户</div>
  </div>
</template>

<script>
import setting from '@/setting'
import dicLabel from '@/components/dic_label'
import { getCustomerList } from '@/api/index'
export default {
  components: {
    dicLabel
  },
  data () {
    return {
      val: '',
      list: [],
      uploadUrl: '',
      page: 1
    }
  },
  methods: {
    async onClear (e) {
      await this.getOneList()
    },
    async onSearch () {
      await this.getOneList(this.val)
    },
    async onChange (event) {
      this.val = event.mp.detail
      await this.getOneList(this.val)
    },
    linkDetail (id) {
      const url = `../customer_detail/main?id=${id}`
      wx.navigateTo({url})
    },
    add_customer () {
      const url = '../add_customer/main?text=add'
      wx.navigateTo({url})
    },
    async getList (data, page) {
      const res = await getCustomerList(data, page)
      if (res.data) {
        for (let i in res.data.data) {
          this.list.push(res.data.data[i])
        }
        this.page = res.data.currentPage
        this.totalPage = res.data.totalPages
      }
    },
    async getOneList (v) {
      const res = await getCustomerList(v, 1)
      if (res.data) {
        this.list = res.data.data
        this.page = res.data.currentPage
        this.totalPage = res.data.totalPages
      }
    }
  },
  async onLoad () {
    this.uploadUrl = setting.uploadUrl
    await this.getOneList()
  },
  async onShow () {
    await this.getOneList()
  },
  async onPullDownRefresh () {
    await this.getOneList(this.val)
    wx.stopPullDownRefresh()
  },
  onReachBottom () {
    if (this.page < this.totalPage) {
      this.page++
      this.getList(this.val, this.page)
    }
  }
}
</script>

<style scoped>
.cus_item{border-bottom:1px solid #eee;padding: 20rpx;font-size: 28rpx;}
.left{width: 120rpx;height: 120rpx;margin-right: 20rpx;overflow: hidden;}
/* .left img{width: 100%;height: 100%;} */
.status1{color: #2f74ff}
.status2{color: red}
.mr15{margin-right: 15rpx}
.search{position: fixed;width: 100%;}
.addBtn{position: fixed;bottom: 0;left: 0;width: 100%;height: 100rpx;line-height: 100rpx;color: #fff;}
.list{padding-bottom: 120rpx;padding-top: 90rpx;}
.nodate{padding: 100rpx 0;color: #666}
</style>
